

@media screen and (max-width: 749px) {
    html{
        height: 100%;
    }
    
    #gato{
        background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526571/eva/gatito_pushui.svg');
        height: 297px; 
        width: 471.5px;
         /* margin-top: 2em; */
        margin-left: -9em; 
        z-index: 10;
        -webkit-animation: sprite-animation 1.2s steps(16,end) infinite;
        -moz-animation: sprite-animation 1.2s steps(16,end) infinite; 
        -ms-animation: sprite-animation 1.2s steps(16,end) infinite; 
        animation: sprite-animation 1.2s steps(16,end) infinite;


        }
    
    #luna {
        visibility: hidden;
        display: none;
    
        }

    #muro{
        position: fixed;
        bottom: 0;
        height: 7.30em;
        width: 100%;
        background: -moz-linear-gradient(top,  #416663 0%, #0c0207 19%); 
        background: -webkit-linear-gradient(top,  #416663 0%,#0c0207 19%); 
        background: linear-gradient(to bottom,  #416663 0%,#0c0207 19%); 
    
        }

    #marco{
        margin: 0 auto;
        border-radius: 16px;
        margin-top: 2em;
        position: relative;
        position: fixed;
    width: 100%;
    bottom: 120px;
        }

}

@media screen and (min-width: 750px) {
    #gato{
        background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526571/eva/gatito_pushui.svg');
        height: 297px; 
        width: 507.5px;
        /* margin-top: 2em; */
        margin-left: 6em; 
        z-index: 10;
        -webkit-animation: sprite-animation 1.2s steps(16,end) infinite;
        -moz-animation: sprite-animation 1.2s steps(16,end) infinite; 
        -ms-animation: sprite-animation 1.2s steps(16,end) infinite; 
        animation: sprite-animation 1.2s steps(16,end) infinite;


        }

    #luna {
        width: 6em;
        height: 6em;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -moz-box-shadow: 30px 10px 0 #F7F8E0;
        -webkit-box-shadow: 30px 10px 0 #F7F8E0;
        box-shadow: 30px 10px 0 #F7F8E0;
        position: absolute;
        z-index: -19;
        left: 75%;
        }

    #muro{
        height: 7.30em;
        width: 100%;
        background: -moz-linear-gradient(top,  #416663 0%, #0c0207 19%); 
        background: -webkit-linear-gradient(top,  #416663 0%,#0c0207 19%); 
        background: linear-gradient(to bottom,  #416663 0%,#0c0207 19%); 
    
        }

    #marco{
        margin: 0 auto;
        border-radius: 16px;
        margin-top: 2em;
        position: relative;
        }

}
    


#edificios{
    background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526533/eva/edificiosOne_fsg7nx.svg');
    height: 200px; 
    width: 100%;
    z-index: -10;
    top: 6.5em;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    -webkit-animation: animar_edificios 120s linear infinite;
    -ms-animation: animar_edificios 120s linear infinite;
    -moz-animation: animar_edificios 120s linear infinite;
    position: absolute;

 
    }


    
/* Animacion edificios */

@keyframes  animar_edificios {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-webkit-keyframes  animar_edificios {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-ms-keyframes  animar_edificios {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-moz-keyframes  animar_edificios {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
    


@-webkit-keyframes sprite-animation { 
        from { background-position: 0 0; }
        to { background-position: -8120px 0; } 
    }

@-ms-keyframes sprite-animation { 
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
    }

@-moz-keyframes sprite-animation { 
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
    }

@keyframes sprite-animation { 
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
    }